<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>名画列表</title>
	<script src="jquery-3.7.0.min.js"></script>
	<script type="text/javascript">
		var objs;
		$(function() {
			// 初始化表格
			initTable();

			// 获取数据
			$.ajax({
				type: "GET",
				url: "data.json",
				success: function(data) {
					objs = data;
					refreshTable(objs);
				},
				error: function() {
					alert("获取数据失败！");
				}
			})

			// 给“增加”按钮绑定事件
			$("#add").click(function() {
				showAddDialog();
			});

			// 给编辑和删除按钮绑定事件（使用委托）
			$("table").on("click", "button.edit", function() {
				var index = $(this).parents("tr").index() - 1;
				showEditDialog(index, objs[index]);
			}).on("click", "button.delete", function() {
				var index = $(this).parents("tr").index() - 1;
				if (confirm("确定要删除该条记录吗？")) {
					objs.splice(index, 1);
					refreshTable(objs);
				}
			});
		});

		// 初始化表格
		function initTable() {
			$("table").append("<tr><th>序号</th><th>名称</th><th>朝代</th><th>作者</th><th>操作</th></tr>");
		}

		// 刷新表格
		function refreshTable(objs) {
			$("table tr:gt(0)").remove();
			for (var i = 0; i < objs.length; i++) {
				var obj = objs[i];
				var $tr = $("<tr>");
				$("<td>").text(i + 1).appendTo($tr);
				$("<td>").text(obj["name"]).appendTo($tr);
				$("<td>").text(obj["dynasty"]).appendTo($tr);
				$("<td>").text(obj["author"]).appendTo($tr);
				$("<td>").append($("<button>").addClass("edit").text("编辑")).append($("<button>").addClass("delete").text("删除")).appendTo($tr);
				$tr.appendTo("table");
			}
		}

		// 弹出增加对话框
		function showAddDialog() {
			var $dialog = $("<div>").addClass("dialog");
			$("<label>").text("名称：").appendTo($dialog);
			$("<input>").attr("name", "name").appendTo($dialog);
			$("<label>").text("朝代：").appendTo($dialog);
			$("<input>").attr("name", "dynasty").appendTo($dialog);
			$("<label>").text("作者：").appendTo($dialog);
			$("<input>").attr("name", "author").appendTo($dialog);
			var $buttonSave = $("<button>").text("保存").click(function() {
				var newObj = {};
				newObj["name"] = $(this).siblings("[name='name']").val();
				newObj["dynasty"] = $(this).siblings("[name='dynasty']").val();
				newObj["author"] = $(this).siblings("[name='author']").val();
				objs.push(newObj);
				refreshTable(objs);
				$dialog.remove();
			});
			var $buttonCancel = $("<button>").text("取消").click(function() {
				$dialog.remove();
			});
			$("<div>").append($buttonSave).append($buttonCancel).appendTo($dialog);
			$dialog.appendTo("body");
		}

		// 弹出编辑对话框
		function showEditDialog(index, obj) {
			var $dialog = $("<div>").addClass("dialog");
			$("<label>").text("名称：").appendTo($dialog);
			$("<input>").attr("name", "name").val(obj["name"]).appendTo($dialog);
			$("<label>").text("朝代：").appendTo($dialog);
			$("<input>").attr("name", "dynasty").val(obj["dynasty"]).appendTo($dialog);
			$("<label>").text("作者：").appendTo($dialog);
			$("<input>").attr("name", "author").val(obj["author"]).appendTo($dialog);
			var $buttonSave = $("<button>").text("保存").click(function() {
				var newObj = {};
				newObj["name"] = $(this).siblings("[name='name']").val();
				newObj["dynasty"] = $(this).siblings("[name='dynasty']").val();
				newObj["author"] = $(this).siblings("[name='author']").val();
				objs[index] = newObj;
				refreshTable(objs);
				$dialog.remove();
			});
			var $buttonCancel = $("<button>").text("取消").click(function() {
				$dialog.remove();
			});
			$("<div>").append($buttonSave).append($buttonCancel).appendTo($dialog);
			$dialog.appendTo("body");
		}
	</script>
	
</head>
<body>
	<table></table>
	<button type="button" id="add">增加</button>
</body>
</html>